<template>
  <div id="app">
    <div>
      <yo-button type="primary" @click="aa">主要按钮1</yo-button>
      <yo-button type="success">成功按钮</yo-button>
      <yo-button type="danger">危险按钮</yo-button>
      <yo-button type="info">信息按钮</yo-button>
      <yo-button type="warning">警告按钮</yo-button>
    </div>
    <div>
      <yo-button plain type="primary">主要按钮</yo-button>
      <yo-button plain type="success">成功按钮</yo-button>
      <yo-button plain type="danger">危险按钮</yo-button>
      <yo-button plain type="info">信息按钮</yo-button>
      <yo-button plain type="warning">警告按钮</yo-button>
    </div>
    <div>
      <yo-button plain round type="primary">主要按钮</yo-button>
      <yo-button plain round type="success">成功按钮</yo-button>
      <yo-button plain round type="danger">危险按钮</yo-button>
      <yo-button plain round type="info">信息按钮</yo-button>
      <yo-button round type="warning">警告按钮</yo-button>
    </div>
    <!-- 弹框 -->
    <yo-dialog :visible.sync="dialogTableVisible">
      <template v-slot:footer>
        <yo-button
          plain
          type="primary"
          @click="handleCancel"
          style="margin-right: 30px"
          >取消</yo-button
        >
        <yo-button plain type="primary" @click="handleCancel">确定</yo-button>
      </template>
    </yo-dialog>
    <ws-table :tableConfig="column" :tableList="list">
      <template v-slot:open>
        <el-button type="success" style="margin: 0 5px 0 0" size="mini"
          >详情</el-button
        >
      </template>
    </ws-table>
    <quota-list
      :quotasList="quotasList"
      @selectQuotas="selectQuotas"
      :max="3"
      :popoverWidth="500"
    ></quota-list>
  </div>
</template>

<script>
export default {
  name: "App",
  components: {},
  data() {
    return {
      dialogTableVisible: false,
      column: [
        {
          field: "num",
          label: "序号",
        },
        {
          field: "name",
          label: "姓名",
        },
        {
          field: "orderCode",
          label: "订单号",
        },
        {
          label: "订单号",
          columnType: "slot",
          slotName: "open",
        },
      ],
      quotasList: [
        {
          group: "基础",
          list: [
            {
              key: "clickNum",
              label: "点击数",
            },
            {
              key: "downloadNum",
              label: "下载数",
            },
            {
              key: "clickNum",
              label: "点击",
            },
            {
              key: "downloadNum",
              label: "下载",
            },
            {
              key: "downloadNum",
              label: "下载",
            },
            {
              key: "downloadNum",
              label: "下载",
            },
          ],
        },
        {
          group: "高级",
          list: [
            {
              key: "clickNum1",
              label: "转化率",
            },
            {
              key: "downloadNum1",
              label: "曝光量",
            },
          ],
        },
      ],
      list: [
        {
          num: 1,
          name: "李四",
          orderCode: 21352453454,
        },
        {
          num: 2,
          name: "李333",
          orderCode: 21352453454,
        },
      ],
    };
  },
  methods: {
    aa() {
      console.log(111);
      this.dialogTableVisible = true;
    },
    handleCancel() {
      this.dialogTableVisible = false;
    },
    selectQuotas(key, item) {
      console.log(key, item);
    },
  },
};
</script>

<style lang="scss"></style>
